<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js" defer></script>
    <link rel="icon" href="./icon.png">
    <title>CSS Keyboard</title>
</head>
<body>
    <div id="board">
        <div class="zone">
            <div id="f-row">
                <div class="key" data-key="Escape">Esc</div>
    
                <div class="f-group">
                    <div class="key" data-key="F1">F1</div>
                    <div class="key" data-key="F2">F2</div>
                    <div class="key" data-key="F3">F3</div>
                    <div class="key" data-key="F4">F4</div>
                </div>
    
                <div class="f-group">
                    <div class="key" data-key="F5">F5</div>
                    <div class="key" data-key="F6">F6</div>
                    <div class="key" data-key="F7">F7</div>
                    <div class="key" data-key="F8">F8</div>
                </div>
    
                <div class="f-group">
                    <div class="key" data-key="F9">F9</div>
                    <div class="key" data-key="F10">F10</div>
                    <div class="key" data-key="F11">F11</div>
                    <div class="key" data-key="F12">F12</div>
                </div>
            </div>
    
            <div id="main">
                <div class="main-row">
                    <div class="key" data-key="Backquote">` ~</div>
                    <div class="key" data-key="Digit1">1 !</div>
                    <div class="key" data-key="Digit2">2 @</div>
                    <div class="key" data-key="Digit3">3 #</div>
                    <div class="key" data-key="Digit4">4 $</div>
                    <div class="key" data-key="Digit5">5 %</div>
                    <div class="key" data-key="Digit6">6 ^</div>
                    <div class="key" data-key="Digit7">7 &</div>
                    <div class="key" data-key="Digit8">8 *</div>
                    <div class="key" data-key="Digit9">9 (</div>
                    <div class="key" data-key="Digit0">0 )</div>
                    <div class="key" data-key="Minus">- _</div>
                    <div class="key" data-key="Equal">= +</div>
                    <div class="key" data-key="Backspace">Backspace</div>
                </div>
                
                <div class="main-row">
                    <div class="key" data-key="Tab">Tab</div>
                    <div class="key" data-key="KeyQ">Q</div>
                    <div class="key" data-key="KeyW">W</div>
                    <div class="key" data-key="KeyE">E</div>
                    <div class="key" data-key="KeyR">R</div>
                    <div class="key" data-key="KeyT">T</div>
                    <div class="key" data-key="KeyY">Y</div>
                    <div class="key" data-key="KeyU">U</div>
                    <div class="key" data-key="KeyI">I</div>
                    <div class="key" data-key="KeyO">O</div>
                    <div class="key" data-key="KeyP">P</div>
                    <div class="key" data-key="BracketLeft">[ {</div>
                    <div class="key" data-key="BracketRight">] }</div>
                    <div class="key" data-key="Backslash">\ |</div>
                </div>
                
                <div class="main-row">
                    <div class="key" data-key="CapsLock">Caps Lock</div>
                    <div class="key" data-key="KeyA">A</div>
                    <div class="key" data-key="KeyS">S</div>
                    <div class="key" data-key="KeyD">D</div>
                    <div class="key" data-key="KeyF">F</div>
                    <div class="key" data-key="KeyG">G</div>
                    <div class="key" data-key="KeyH">H</div>
                    <div class="key" data-key="KeyJ">J</div>
                    <div class="key" data-key="KeyK">K</div>
                    <div class="key" data-key="KeyL">L</div>
                    <div class="key" data-key="Semicolon">; :</div>
                    <div class="key" data-key="Quote">' "</div>
                    <div class="key" data-key="Enter">Enter</div>
                </div>
                
                <div class="main-row">
                    <div class="key" data-key="ShiftLeft">Shift</div>
                    <div class="key" data-key="IntlBackslash">\ |</div>
                    <div class="key" data-key="KeyZ">Z</div>
                    <div class="key" data-key="KeyX">X</div>
                    <div class="key" data-key="KeyC">C</div>
                    <div class="key" data-key="KeyV">V</div>
                    <div class="key" data-key="KeyB">B</div>
                    <div class="key" data-key="KeyN">N</div>
                    <div class="key" data-key="KeyM">M</div>
                    <div class="key" data-key="Comma">, &lt;</div>
                    <div class="key" data-key="Period">. &gt;</div>
                    <div class="key" data-key="Slash">/ ?</div>
                    <div class="key" data-key="ShiftRight">Shift</div>
                </div>
                
                <div class="main-row">
                    <div class="key" data-key="ControlLeft">Ctrl</div>
                    <div class="key" data-key="MetaLeft OSLeft">Win</div>
                    <div class="key" data-key="AltLeft">Alt</div>
                    <div class="key" data-key="Space"></div>
                    <div class="key" data-key="AltRight">Alt Gr</div>
                    <div class="key" data-key="MetaRight OSRight">Win</div>
                    <div class="key" data-key="ContextMenu">Menu</div>
                    <div class="key" data-key="ControlRight">Ctrl</div>
                </div>
            </div>
        </div>

        <div class="zone">
            <div id="func">
                <div class="key" data-key="PrintScreen">Print Screen</div>
                <div class="key" data-key="ScrollLock">Scroll Lock</div>
                <div class="key" data-key="Pause">Pause Break</div>
            </div>

            <div id="nav">
                <div id="clipboard">
                    <div class="key" data-key="Insert">Ins</div>
                    <div class="key" data-key="Home">Home</div>
                    <div class="key" data-key="PageUp">Page Up</div>
                    <div class="key" data-key="Delete">Del</div>
                    <div class="key" data-key="End">End</div>
                    <div class="key" data-key="PageDown">Page Dn</div>
                </div>

                <div id="arrows">
                    <div class="key" data-key="ArrowUp">↑</div>
                    <div class="key" data-key="ArrowDown">↓</div>
                    <div class="key" data-key="ArrowLeft">←</div>
                    <div class="key" data-key="ArrowRight">→</div>
                </div>
            </div>
        </div>

        <div class="zone">
            <div id="indicators">
                <div class="indicator" id="numlock">1</div>
                <div class="indicator" id="capslock">A</div>
                <div class="indicator" id="scrolllock">⤓</div>
            </div>

            <div id="numpad">
                <div class="key" data-key="NumLock">Num Lock</div>
                <div class="key" data-key="NumpadDivide">/</div>
                <div class="key" data-key="NumpadMultiply">*</div>
                <div class="key" data-key="NumpadSubtract">-</div>
                <div class="key" data-key="Numpad7">7</div>
                <div class="key" data-key="Numpad8">8</div>
                <div class="key" data-key="Numpad9">9</div>
                <div class="key" data-key="Numpad4">4</div>
                <div class="key" data-key="Numpad5">5</div>
                <div class="key" data-key="Numpad6">6</div>
                <div class="key" data-key="Numpad1">1</div>
                <div class="key" data-key="Numpad2">2</div>
                <div class="key" data-key="Numpad3">3</div>
                <div class="key" data-key="Numpad0">0</div>
                <div class="key" data-key="NumpadDecimal">.</div>
                <div class="key" data-key="NumpadAdd">+</div>
                <div class="key" data-key="NumpadEnter">Enter</div>
            </div>
        </div>
    </div>
</body>
</html>